<template>
  <div>
     <div class="header">
      <div
        class="el-row"
        style="padding-left: -15px; margin-right: -15px; width: 100%"
      >
        <div class="el-col6" style="padding-left: 15px; padding-right: 15px">
          <div class="el-col">
            <div class="lable">类型编号</div>
            <input
              type="text"
              placeholder="请输入"
              v-model="test.like_code"
              style="
                border: 0;
                border-radius: 6px;
                margin-top: 20px;
                height: 40px;
                width: 250px;
                background-color: rgb(248, 245, 245);
              "
            />
          </div>
        </div>
        <div class="el-col6" style="padding-left: 15px; padding-right: 15px">
          <div class="el-col">
            <div class="lable">类型名称</div>
            <input
              type="text"
              placeholder="请输入"
              v-model="test.like_name"
              style="
                border: 0;
                border-radius: 6px;
                margin-top: 20px;
                height: 40px;
                width: 250px;
                background-color: rgb(248, 245, 245);
              "
            />
          </div>
        </div>
       
        <div class="butt" style="margin-left: 50px">
          <el-button class="butt1" round @click="search" style="margin-left:300px">搜索</el-button>
          <el-button
            class="butt1"
            style="background-color: rgb(255, 255, 255)"
            round
            @click="test = ''"
            >重置</el-button
          >
        </div>
      </div>
    </div>
     <div class="body">
      <div style="width: 100%; height: 80px">
        <el-button
          style="background-color: rgb(0, 190, 118); width: 150px; height: 50px"
          round
     @click="dialogVisible=true"
        >
          <span style="color: #fff">新增货品类型</span>
        </el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="200">
        </el-table-column>
        <el-table-column prop="code" label="货品类型编号" width="300">
        </el-table-column>
        <el-table-column prop="name" label="货品类型名称" width="300">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="300">
        </el-table-column>
        
        <el-table-column  label="操作" width="150">
          <template v-slot="{ row }">
            <el-button
              type="text"          
              size="small"
              @click="edit(row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="remove(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        :current-page="1"
        :page-sizes="[10, 20, 30, 50]"
        layout="total,sizes,prev,pager,next,jumper"
        :total="parseInt(total)"
      >
      </el-pagination>
    </div>
    <el-dialog
  :title="this.formDate.id?'修改货品类型':'添加货品类型'"
  :visible.sync="dialogVisible"
  width="30%"
  
  :before-close="handleClose">
  <el-form ref="form" :model="formDate" label-width="80px" :rules="rules">
    <el-col class="span1" :span="24">
    <el-form-item label="货品类型编码"  prop="code"><br>
    <el-input v-model="formDate.code" disabled style="margin-left:-70px"></el-input>
  </el-form-item>
    </el-col>
    <el-col class="span1" :span="24">
  <el-form-item label="货品类型名称" prop="name"><br>
    <el-input v-model="formDate.name" style="margin-left:-70px"></el-input>
  </el-form-item>
    </el-col>
  </el-form>
  <span slot="footer" style="margin-right:50px">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submits">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import {HuoPintype,delType,getHp,addType} from '@/api/huopinType'

export default {
data(){
  return{
   dialogVisible:false,
    test:{
     like_name:'',
      like_code:'',
    },
    total:'',
    tableData:[],
    page:{
      size:10,
      current:1
    },
    formDate:{
      code:'',
      name:''
    },
    rules:{
      code:[{required:true,trigger:'blur'}],
      name:[{required:true,message:'请输入货品类型名称',trigger:'blur'}]

    }
  }
},
created(){
  this.HuoPintype()
  this.getHp()
},
methods:{
  handleClose(){
    this.dialogVisible=false,
    this.formDate={
      code:'',
      name:''
    }
  },
  async HuoPintype(){
    const {data:{data}}=await HuoPintype()
    // console.log(data);
    this.total=data.total
    this.tableData=data.records
  },
  async getHp(){
    const {data:{data}}=await getHp()
    this.formDate.code=data
  },
  // 搜索
 async search(){
const {data:{data}}=await HuoPintype(this.test)
 this.total=data.total
    this.tableData=data.records
  },
 async submits(){
  await addType(this.formDate)
  this.$message.success('操作成功啦~')
  this.handleClose()
  this.HuoPintype()
 },
 edit(row){
  // console.log(row);
  this.dialogVisible=true
  this.formDate={...row}
  
 },
//   // 删除
 async remove(id){
   await this.$confirm('确定要删除嘛?')
await delType(id)
this.HuoPintype()
this.$message.success('删除成功啦~')
 },
  handleSizeChange(size){
this.page.size=size
this.HuoPintype()
  },
  handleCurrentChange(current){
this.page.current=current
this.HuoPintype()
  }
}
}
</script>

<style lang="less" scoped>
.header {
  height: 100px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  padding: 30px;
  margin-bottom: 20px;
  width: 1200px;
  .el-row {
    display: flex;
  }
  .el-col{
    height: 0;
  }
  .el-col-6 {
    .el-col {
      position: relative;
      height: 186px;
      background: #fbf7f7;
      border-radius: 8px;
      padding: 20px;
    }
    width: 25%;

    .lable {
      margin-bottom: -10px;
      height: 18px;
      color: #887e7e;
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 300;
    }
  }
}
.butt1 {
  width: 100px;
  height: 40px;
  margin-top: 40px;
  // margin-left: 180px;
  background-color: rgb(255, 178, 0);
}
.body {
  //  height: 900px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
  padding: 30px;
  margin-bottom: 20px;
  width: 1200px;
  .middle {
    background-color: gray;
    height: 50px;
  }
}
.bottom {
  margin-top: 30px;
  margin-left: 600px;
}
.buttoncan {
  height: 40px;
  border-radius: 20px;
  width: 200px;
  font-size: 14px;
  //     font-family: PingFangSC,PingFangSC-Medium;
  //     font-weight: 500;
  text-align: center;
  // line-height: 40px;
  padding-left: 26px;
  padding-right: 26px;
  //     cursor: pointer;
  //     outline: 0;
}
.dialog-footer {
  padding: 25px 0 0;
  margin: 0 -30px -5px;
  border-top: 1px solid #f5efee;
  text-align: center;
}
.span1{
            padding-left: 15px;
            padding-right: 15px;

}

</style>